<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>freej2me-web</title>
  </head>

  <body>
    <style>
      html,
      body {
        height: 100%;
      }

      body {
        margin: 0;
        padding: 0;
        background-color: #eee;
        font-family: sans;
      }

      #loading {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        inset: 0;
        font-size: 2em;
      }

      main {
        margin: auto;
        width: 100%;
        max-width: 360px;
      }

      @media (min-width: 480px) {
        main {
          max-width: 480px;
        }
      }

      :root {
        --primary: #4a6cb3;
        --primary-dark: #395592;
        --secondary: #6fc276;
        --secondary-dark: #50a359;
        --danger: #e74c3c;
        --danger-dark: #c0392b;
        --gray-light: #f5f5f5;
        --gray: #e0e0e0;
        --gray-dark: #9e9e9e;
        --text: #333;
        --text-light: #666;
        --border-radius: 4px;
        --light-color: #f8f9fa;
        --border-color: #dee2e6;
        --danger-color: #dc3545;
        --warning-color: #ffc107;
      }

      h2 {
        font-size: 1.3em;
        margin-bottom: 0.5em;
      }

      input,
      button,
      select {
        box-sizing: border-box;
        background-color: white;
      }

      .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
      }

      .data-controls {
        display: flex;
        gap: 10px;
      }

      .data-controls .btn {
        padding: 8px 16px;
      }

      .game-list {
        margin-bottom: 20px;
        background-color: white;
        /* need overflow: hidden for border-radius */
        overflow: hidden;
        border-radius: 8px;
      }

      .game-item {
        display: flex;
        align-items: stretch;
        justify-content: space-between;
      }

      .game-item a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        text-decoration: none;
        color: #222;
        flex-grow: 1;
        padding: 8px;
      }

      .game-item a:hover {
        background-color: #f8f9fa;
      }

      .game-item .icon,
      .preview-icon {
        width: 32px;
        height: 32px;
        margin-right: 10px;
      }

      .game-item .game-info {
        flex-grow: 1;
      }

      .game-item button {
        padding: 5px 10px;
        background-color: hsl(211, 80%, 97%);
        border: none;
        cursor: pointer;
      }

      .game-item button:hover {
        background-color: hsl(211, 70%, 92%);
      }

      .btn {
        padding: 5px 8px;
        border: none;
        border-radius: var(--border-radius);
        cursor: pointer;
        font-weight: 500;
        transition: background-color 0.2s;
      }

      .btn-primary {
        background-color: var(--primary);
        color: white;
      }

      .btn-primary:hover {
        background-color: var(--primary-dark);
      }

      .btn-secondary {
        background-color: var(--secondary);
        color: white;
      }

      .btn-secondary:hover {
        background-color: var(--secondary-dark);
      }

      .btn-danger {
        background-color: var(--danger);
        color: white;
      }

      .btn-danger:hover {
        background-color: var(--danger-dark);
      }

      .btn-outline {
        background-color: transparent;
        border: 1px solid var(--gray-dark);
        color: var(--text);
      }

      .btn-outline:hover {
        background-color: var(--gray);
      }

      .save-button {
        display: block;
        width: 100%;
        font-size: 1.2em;
        padding: 10px;
        background-color: hsl(130, 65%, 30%);
        border: none;
        border-radius: 4px;
        cursor: pointer;
        color: white;
      }

      .save-button:hover {
        background-color: hsl(130, 65%, 20%);
      }

      .btn-full {
        display: block;
        padding: 8px 16px;
      }

      .add-edit-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 2em;
        margin-bottom: 0.5em;
      }

      .add-edit-header h2 {
        margin: 0;
      }

      .warning-message {
        background-color: #fff3cd;
        color: #856404;
        padding: 10px;
        border-radius: var(--border-radius);
        margin: 10px 0;
        display: flex;
        align-items: center;
        gap: 10px;
      }

      .warning-message i {
        margin-right: 8px;
      }

      .loading {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
      }

      .spinner {
        border: 3px solid rgba(0, 0, 0, 0.1);
        border-radius: 50%;
        border-top: 3px solid var(--primary);
        width: 20px;
        height: 20px;
        animation: spin 1s linear infinite;
        margin-right: 10px;
      }

      @keyframes spin {
        0% {
          transform: rotate(0deg);
        }

        100% {
          transform: rotate(360deg);
        }
      }

      .form-group {
        margin-bottom: 15px;
      }

      .form-group label {
        display: block;
        margin-bottom: 5px;
        font-weight: bold;
        font-size: 0.9em;
      }

      .form-group label.toggle-label {
        margin-bottom: 8px;
      }

      input[type="file"] {
        width: 100%;
        padding: 8px 10px;
        border: 1px solid var(--border-color);
        border-radius: 4px;
        font-size: 0.95em;
        box-sizing: border-box;
        /* Include padding in width */
      }

      input[type="file"] {
        padding: 5px;
        /* Different padding for file input */
      }

      .settings-container select,
      .settings-container input[type="number"],
      .settings-container textarea {
        width: 100%;
        padding: 8px;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
        /* Include padding in width */
      }

      .settings-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 10px;
        /* Row gap, Column gap */
      }

      .settings-grid *:nth-child(2n + 1):last-child {
        /* If this is the only item left on the last row, span both columns */
        grid-column: 1 / -1;
        /* Starts at the first grid line and ends at the last */
      }

      .settings-grid label {
        display: block;
        margin-bottom: 5px;
        font-weight: bold;
      }

      .settings-grid label.checkbox {
        font-weight: normal;
        display: flex;
        align-items: center;
      }

      .settings-grid .checkbox input[type="checkbox"] {
        margin-right: 8px;
      }

      .custom-size-inputs {
        margin-top: 5px;
      }

      .custom-size-inputs input {
        width: 80px !important;
        /* Override default width */
        margin-right: 10px;
      }

      textarea {
        height: 80px;
        resize: vertical;
      }

      /* Preview/Manage Containers */
      .preview-container {
        display: flex;
        align-items: center;
        padding: 10px;
        border: 1px dashed var(--border-color);
        border-radius: 4px;
        margin-bottom: 15px;
        background-color: var(--light-color);
      }

      .preview-container .game-name {
        font-size: 1.1em;
        margin: 0 10px;
      }

      .manage-controls {
        margin-left: auto;
        /* Push buttons to the right */
        display: flex;
        gap: 8px;
      }

      .control-button {
        padding: 5px 8px;
        font-size: 0.85em;
        line-height: 1;
        min-width: 30px;
        border-radius: 4px;
        cursor: pointer;
        border: 1px solid transparent;
        transition: background-color 0.2s ease, border-color 0.2s ease;
      }

      .danger-button {
        background-color: var(--danger-color);
        color: white;
        border-color: var(--danger-color);
      }

      .danger-button:hover {
        background-color: #c82333;
        border-color: #bd2130;
      }

      .warning-button {
        background-color: var(--warning-color);
        color: var(--dark-color);
        border-color: var(--warning-color);
      }

      .warning-button:hover {
        background-color: #e0a800;
        border-color: #d39e00;
      }

      .advanced-settings summary {
        margin-top: 1.5em;
        margin-bottom: 1em;
      }

      summary h3 {
        display: inline;
      }

      .aux-file-upload {
        position: relative;
        display: inline-block;
        width: 100%;
        margin-bottom: 15px;
      }

      .aux-file-upload-btn {
        display: block;
        width: 100%;
        padding: 5px 10px;
        text-align: center;
        background-color: #f5f5f5;
        border: 1px dashed #9e9e9e;
        border-radius: 4px;
        color: #666;
        cursor: pointer;
        transition: background-color 0.2s, border-color 0.2s;
        box-sizing: border-box;
      }

      .aux-file-upload:hover .aux-file-upload-btn {
        background-color: #e0e0e0;
      }

      .aux-file-upload input[type="file"] {
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        cursor: pointer;
      }

      .keyboard-controls {
        background: white;
        padding: 12px;
        border-radius: 8px;
        margin-top: 20px;
      }

      .keyboard-controls h3 {
        margin: 0;
        font-size: 1.05em;
      }

      .keyboard-controls table {
        margin-top: 10px;
        width: 100%;
      }

      .keyboard-controls table td {
        text-align: center;
      }

      .keyboard-controls .key {
        background-color: #f5f5f5;
        border: 1px solid #9e9e9e;
        border-radius: 3px;
        padding: 2px 6px;
        font-family: monospace;
        font-size: 12px;
      }
    </style>
    <div id="loading">Loading...</div>
    <main id="main" style="display: none">
      <div class="header">
        <h1>freej2me-web</h1>
        <div class="data-controls">
          <button class="btn btn-outline" id="import-data-btn">
            Import Data
          </button>
          <input
            type="file"
            id="import-data-file"
            style="display: none"
            accept=".zip"
          />
          <button class="btn btn-outline" id="export-data-btn">
            Export Data
          </button>
          <a
            id="export-data-link"
            style="display: none"
            download="freej2me-data.zip"
            >x</a
          >
        </div>
      </div>
      <h2>Installed Games</h2>
      <div id="game-list" class="game-list">
        <div class="game-item">
          <a href="run">
            <div class="icon"></div>
            <div class="game-info">Game Title 1</div>
          </a>
          <button>Manage</button>
        </div>
      </div>
      <div class="add-edit-header">
        <h2 id="add-edit-text">Add new game</h2>
        <button id="clear-current" class="btn btn-outline">Clear</button>
      </div>
      <div id="file-input-step">
        <div class="form-group">
          <label for="game-file-input">Select JAR file</label>
          <input type="file" id="game-file-input" accept=".jar" />
        </div>
      </div>
      <div id="file-input-jad-step" style="display: none">
        <div id="warning-message" class="warning-message">
          <span>⚠️</span>
          <span
            >This game requires a JAD file to function properly. Please upload
            one.</span
          >
        </div>
        <div class="form-group">
          <label for="upload-descriptor-file-input">Select JAD file</label>
          <input type="file" id="upload-descriptor-file-input" accept=".jad" />
        </div>
        <div class="form-group">
          <button id="continue-without-jad" class="btn btn-outline btn-full">
            Continue without JAD file (might not work)
          </button>
        </div>
      </div>
      <div class="loading" id="file-input-loading" style="display: none">
        <div class="spinner"></div>
        <span>Analyzing file...</span>
      </div>
      <div id="add-manage-step" style="display: none">
        <div id="preview" class="preview-container">
          <img class="preview-icon" />
          <span class="preview-name">Game name</span>
          <div id="preview-controls" class="manage-controls">
            <button
              id="wipe-data-btn"
              class="control-button warning-button"
              title="Wipe Game Data"
            >
              Wipe Data
            </button>
            <button
              id="uninstall-btn"
              class="control-button danger-button"
              title="Uninstall Game"
            >
              Uninstall
            </button>
          </div>
        </div>
        <div id="edit-settings-container" class="settings-container">
          <div class="aux-file-upload">
            <div class="aux-file-upload-btn">
              Upload optional JAD descriptor file
            </div>
            <input type="file" id="aux-jad-file-input" accept=".jad" />
          </div>
          <div class="settings-grid">
            <div class="form-group">
              <label for="phoneType">Phone type:</label>
              <select id="phoneType">
                <option value="Standard">Standard</option>
                <option value="Nokia">Nokia</option>
                <option value="Motorola">Motorola</option>
                <option value="Siemens">Siemens</option>
                <option value="SonyEricsson">SonyEricsson</option>
              </select>
            </div>
            <div class="form-group">
              <label for="screenSize">Screen Size:</label>
              <select id="screenSize">
                <option value="96x65">96x65</option>
                <option value="96x96">96x96</option>
                <option value="104x80">104x80</option>
                <option value="128x128">128x128</option>
                <option value="132x176">132x176</option>
                <option value="128x160">128x160</option>
                <option value="176x208">176x208</option>
                <option value="176x220">176x220</option>
                <option value="208x208">208x208</option>
                <option value="240x320">240x320</option>
                <option value="320x240">320x240</option>
                <option value="240x400">240x400</option>
                <option value="352x416">352x416</option>
                <option value="360x640">360x640</option>
                <option value="640x360">640x360</option>
                <option value="480x800">480x800</option>
                <option value="800x480">800x480</option>
                <option value="custom">Custom</option>
              </select>
              <div class="custom-size-inputs" id="edit-custom-size-inputs">
                <input
                  type="number"
                  placeholder="Width"
                  id="customWidth"
                  min="1"
                />
                <input
                  type="number"
                  placeholder="Height"
                  id="customHeight"
                  min="1"
                />
              </div>
            </div>
            <div class="form-group">
              <label for="fontSize">Font size:</label>
              <select id="fontSize">
                <option value="0">Dynamic</option>
                <option value="1">Small</option>
                <option value="2">Medium</option>
                <option value="3">Large</option>
              </select>
            </div>
            <div class="form-group">
              <label for="dgFormat">DirectGraphics native format:</label>
              <select id="dgFormat">
                <option value="444">444 RGB</option>
                <option value="4444">4444 ARGB</option>
                <option value="565">565 ARGB</option>
                <option value="888">888 ARGB</option>
                <option value="8888">8888 ARGB</option>
              </select>
            </div>
            <label class="checkbox"
              ><input type="checkbox" name="enableSound" /> Enable sound</label
            >
            <label class="checkbox"
              ><input type="checkbox" name="rotate" /> Rotate screen</label
            >
            <label class="checkbox"
              ><input type="checkbox" name="forceFullscreen" /> Force
              fullscreen</label
            >
            <label class="checkbox"
              ><input type="checkbox" name="textureDisableFilter" /> Disable
              texture filtering</label
            >
            <label class="checkbox"
              ><input type="checkbox" name="queuedPaint" /> Queue paint events
              (useful if game hangs)</label
            >
          </div>
          <details class="advanced-settings">
            <summary>
              <h3>Advanced settings</h3>
            </summary>
            <div class="form-group">
              <label for="editAppProps">Additional App Properties:</label>
              <textarea
                id="editAppProps"
                placeholder="e.g., key: value, one per line"
              ></textarea>
            </div>
            <div class="form-group">
              <label for="editSysProps">Additional System Properties:</label>
              <textarea
                id="editSysProps"
                placeholder="e.g., key: value, one per line"
              ></textarea>
            </div>
          </details>
        </div>
        <button class="save-button" id="add-save-button">Add game</button>
      </div>
      <div class="keyboard-controls">
        <h3>Keyboard controls</h3>
        <table>
          <tr>
            <td><span class="key">Esc</span></td>
            <td>Enter/exit freej2me options</td>
          </tr>
          <tr>
            <td><span class="key">F1</span> or <span class="key">Q</span></td>
            <td>Left soft key</td>
          </tr>
          <tr>
            <td><span class="key">F2</span> or <span class="key">W</span></td>
            <td>Right soft key</td>
          </tr>
          <tr>
            <td><span class="key">0</span> to <span class="key">9</span></td>
            <td>Keypad numbers</td>
          </tr>
          <tr>
            <td>Numpad keys</td>
            <td>Numbers with keys 123 and 789 swaped</td>
          </tr>
          <tr>
            <td><span class="key">E</span></td>
            <td>*</td>
          </tr>
          <tr>
            <td><span class="key">R</span></td>
            <td>#</td>
          </tr>
          <tr>
            <td><span class="key">↑</span></td>
            <td>Up</td>
          </tr>
          <tr>
            <td><span class="key">↓</span></td>
            <td>Down</td>
          </tr>
          <tr>
            <td><span class="key">←</span></td>
            <td>Left</td>
          </tr>
          <tr>
            <td><span class="key">→</span></td>
            <td>Right</td>
          </tr>
          <tr>
            <td><span class="key">⏎ Enter</span></td>
            <td>Action key (OK button)</td>
          </tr>
        </table>
      </div>
      <br /><br />
    </main>
    <script src="https://cjrtnc.leaningtech.com/4.1/loader.js"></script>
    <script type="module" src="src/launcher.js"></script>
  </body>
</html>
